.message-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px;
  padding: 10px 50px;
  border-radius: 5px;

  &.message-left {
    transform: translateX(calc(-100% - 20px));

    &.message-container-show {
      transform: translateX(0);
    }

    &.message-container-leave {
      transform: translateX(calc(-100% - 20px));
    }
  }

  &.message-right {
    transform: translateX(calc(100% + 20px));

    &.message-container-show {
      transform: translateX(0);
    }

    &.message-container-leave {
      transform: translateX(calc(100% + 20px));
    }
  }
}
